<template>
	<t-modal  :title="$ct('SelectFormSystem','选择系统中的表单')" :width="1000" :visible="visible" wrapClassName="t-popup-modal" @ok="handleSubmit"
		@cancel="handleCancel" :cancelText="$ct('close','关闭')" :destroyOnClose="true">
		<a-row :gutter="10">
			<a-col :md="24" :sm="24">
				<a-card :bordered="false">
					<tool-bar @search="$refs.table.refresh(true)" @reset="resetSearchForm">
						<template slot="toolForm">
							<a-form-item :label="$ct('FormName','表单名称')">
								<a-input v-model="queryParam.name" :placeholder="$ct('FormName','表单名称')" />
							</a-form-item>
						</template>
					</tool-bar>
					<div class="page-common-sub-box">
						<data-grid ref="table" :url="url" :columns="columns" :queryParam="queryParam" rowKey="uuid"
							showPagination="auto" rowSelectionType="radio" @rowClick="tableRowClick">
							<span slot="renderAction" slot-scope="{ text, record }">
								<a @click="handlePreview(record)">{{$ct("preview","预览")}}</a>
							</span>
						</data-grid>
					</div>
				</a-card>
			</a-col>
		</a-row>
		<preview-form ref="previewForm" :visible="previewFormVisible" :data="jsonData" @cancel="previewFormCancel"></preview-form>
	</t-modal>
</template>

<script>
	import {
		DataGrid
	} from "@/components";
	import previewForm from "./previewForm.vue";

	export default {
		components: {
			DataGrid,
			previewForm
		},
		props: {
			visible: {
				type: Boolean,
			}
		},
		data() {
			return {
				// 查询参数
				queryParam: {
					status: true
				},
				columns: [{
						title: "名称",
						dataIndex: "name",
						width: 100,
						langCode: "name",
					},
					{
						title: "编码",
						dataIndex: "code",
						width: 100,
            langCode: "reportCode",
					},
					{
						title: "操作",
						align: "center",
						dataIndex: "action",
						width: 150,
						scopedSlots: {
							customRender: "renderAction",
						},
						fixed: "right",
					}
				],
				jsonData: {},
				url: {
					getPageSet: "/workflow/actFormConfigure/getPageSet",
				},
				// 加载数据方法 必须为 Promise 对象
				loadData: (parameter) => {
					const requestParameters = Object.assign({}, parameter, this.queryParam);
					return this.$post(this.url.getUserList, requestParameters).then(
						(res) => {
							return res;
						}
					);
				},
				previewFormVisible: false
			};
		},
		methods: {
			tableRowClick(record){
				let keys = [];
				keys.push(record.uuid);
				this.$refs.table.selectedRowKeys = keys;
				this.$refs.table.selectedRows = [record];
			},
			handleSubmit() {
				if (!this.$refs.table.selectedRowKeys.length) {
					return this.$message.warn('请选择要使用的表单', 1.5)
				}
				let uuid = this.$refs.table.selectedRowKeys.toString()
				this.$emit("ok", uuid)
			},
			handleCancel() {
				this.$emit("cancel")
			},
			resetSearchForm() {
				this.queryParam = {
					status: true
				}
				this.$refs.table.refresh();
			},
			handlePreview(val) {
				this.previewFormVisible = true;
				this.$refs.previewForm.plugs = [];
				this.$refs.previewForm.plugs.push((resolve) => require([`@/pages${val.nodeFormPath}.vue`], resolve));
			},
			previewFormCancel(){
				this.previewFormVisible = false;
			}
		},
	};
</script>

<style lang="less" scoped>
	/deep/ .advanced-table {
		height: 100% !important;
	}
</style>
